<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一篇博客文章 - 我的个人博客</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="../blog.html" class="active">博客</a></li>
                    <li><a href="../about.html">关于我</a></li>
                    <li><a href="../contact.html">联系方式</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <article class="post-container">
        <div class="container">
            <div class="post-header">
                <h2>第一篇博客文章</h2>
                <div class="post-meta">
                    <span class="post-date">发布于：2023年12月1日</span>
                    <span class="post-author">作者：小明</span>
                    <span class="post-category">分类：技术</span>
                </div>
            </div>

            <div class="post-image">
                <img src="../img/post1.jpg" alt="文章主图">
            </div>

            <div class="post-content">
                <p>欢迎阅读我的第一篇博客文章！在这篇文章中，我将分享我如何使用HTML、CSS和JavaScript构建这个简单而实用的个人博客网站。</p>

                <h3>为什么要创建一个个人博客？</h3>
                <p>在这个信息爆炸的时代，拥有一个属于自己的小天地变得尤为重要。个人博客不仅是展示自己技能和想法的平台，也是一个记录成长和思考的空间。</p>
                
                <p>通过创建和维护个人博客，我们可以：</p>
                <ul>
                    <li>记录和分享知识与经验</li>
                    <li>建立个人品牌</li>
                    <li>结识志同道合的朋友</li>
                    <li>提升写作和表达能力</li>
                    <li>深化对技术的理解</li>
                </ul>

                <h3>技术栈介绍</h3>
                <p>这个博客网站采用了最基础也是最经典的Web前端技术栈：</p>

                <h4>1. HTML5</h4>
                <p>HTML（超文本标记语言）是网页的基础结构。HTML5是最新的HTML标准，提供了更多的语义化标签和功能。在这个博客中，我使用了诸如 &lt;header&gt;, &lt;footer&gt;, &lt;section&gt;, &lt;article&gt; 等语义化标签，使代码更具可读性和结构性。</p>

                <pre><code>&lt;article class="post-container"&gt;
    &lt;div class="container"&gt;
        &lt;div class="post-header"&gt;
            &lt;h2&gt;第一篇博客文章&lt;/h2&gt;
            &lt;!-- 更多内容 --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/article&gt;</code></pre>

                <h4>2. CSS3</h4>
                <p>CSS（层叠样式表）负责网页的样式和布局。CSS3添加了许多新特性，如弹性布局、网格布局、过渡和动画等。在本博客中，我使用了响应式设计原则，确保网站在不同设备上都有良好的显示效果。</p>

                <pre><code>.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}</code></pre>

                <h4>3. JavaScript</h4>
                <p>JavaScript是一种功能强大的脚本语言，可以为网页添加交互性和动态效果。在这个博客中，我使用JavaScript实现了文章搜索、分类筛选和表单验证等功能。</p>

                <pre><code>document.addEventListener('DOMContentLoaded', function() {
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // 表单验证和提交逻辑
            alert('消息已发送！');
        });
    }
});</code></pre>

                <h3>响应式设计</h3>
                <p>为了确保博客在各种设备上都有良好的用户体验，我采用了响应式设计原则。主要的响应式设计技术包括：</p>
                
                <ul>
                    <li>流式布局</li>
                    <li>弹性单位（如em, rem, %）</li>
                    <li>媒体查询</li>
                    <li>弹性图片</li>
                </ul>

                <p>通过这些技术，无论是在桌面电脑、平板还是手机上，用户都能获得一致且舒适的浏览体验。</p>

                <h3>未来计划</h3>
                <p>这只是一个开始，我计划在未来添加更多功能和改进：</p>
                
                <ul>
                    <li>添加评论系统</li>
                    <li>集成分享到社交媒体功能</li>
                    <li>实现夜间模式</li>
                    <li>提升页面加载速度</li>
                    <li>加入更多交互效果</li>
                </ul>

                <p>如果你有任何建议或反馈，欢迎通过联系页面与我交流。感谢阅读！</p>
            </div>

            <div class="post-tags">
                <span class="tag-label">标签：</span>
                <a href="#" class="tag">HTML</a>
                <a href="#" class="tag">CSS</a>
                <a href="#" class="tag">JavaScript</a>
                <a href="#" class="tag">Web开发</a>
                <a href="#" class="tag">博客搭建</a>
            </div>

            <div class="post-navigation">
                <div class="empty-nav"></div>
                <a href="post2.html" class="next-post">下一篇：第二篇博客文章 &raquo;</a>
            </div>

            <div class="share-post">
                <h3>分享这篇文章</h3>
                <div class="share-buttons">
                    <a href="#" class="share-button">
                        <img src="../img/wechat.svg" alt="微信">
                    </a>
                    <a href="#" class="share-button">
                        <img src="../img/weibo.svg" alt="微博">
                    </a>
                    <a href="#" class="share-button">
                        <img src="../img/twitter.svg" alt="Twitter">
                    </a>
                    <a href="#" class="share-button">
                        <img src="../img/facebook.svg" alt="Facebook">
                    </a>
                </div>
            </div>

            <div class="related-posts">
                <h3>你可能也喜欢</h3>
                <div class="posts-grid">
                    <div class="post-card">
                        <img src="../img/post2.jpg" alt="文章图片">
                        <div class="post-content">
                            <h4>第二篇博客文章</h4>
                            <p class="post-date">2023年12月15日</p>
                            <a href="post2.html" class="read-more">阅读更多</a>
                        </div>
                    </div>
                    <div class="post-card">
                        <img src="../img/post3.jpg" alt="文章图片">
                        <div class="post-content">
                            <h4>第三篇博客文章</h4>
                            <p class="post-date">2024年1月5日</p>
                            <a href="post3.html" class="read-more">阅读更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>

    <footer>
        <div class="container">
            <p>&copy; 2024 我的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#"><img src="../img/github.svg" alt="GitHub"></a>
                <a href="#"><img src="../img/twitter.svg" alt="Twitter"></a>
                <a href="#"><img src="../img/linkedin.svg" alt="LinkedIn"></a>
            </div>
        </div>
    </footer>

    <script src="../js/main.js"></script>
</body>
</html> 